<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form-model :model="queryParam" layout="inline">
        <a-row :gutter="20">
          <a-col :span="4">
            <a-form-model-item>
              <a-input v-model="queryParam['filter[name]']" placeholder="请输入业务小类" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item>
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div class="table-operator">
      <s-table
        bordered
        size="middle"
        ref="table"
        :row-key="(record) => record.business_id"
        :columns="priceColumns"
        :data="priceData"
        :showPagination="null"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`搜索${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
            重置
          </a-button>
        </div>
        <template slot="name" slot-scope="text,record">
          <a-tooltip v-if="record.name_desc != ''">
            <template slot="title">
              {{record.name_desc}}
            </template>
            {{text}}
          </a-tooltip>
          <div v-else>{{text}}</div>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button size="small" type="primary" @click="handleMat(record.business_id)">所需材料</a-button>
        </template>
      </s-table>
    </div>
    <a-modal
      title="所需材料列表"
      v-model="visible"
      :width="600"
      :footer="null"
    >
      <a-table
        bordered
        :row-key="(record) => record.mat_id"
        :columns="matColumns"
        :data-source="matData"
        :pagination="false"
      >
        <template slot="index" slot-scope="text,record,index">
          材料{{index + 1}}
        </template>
      </a-table>
      <div class="note" v-if="note != ''" v-html="note"></div>
    </a-modal>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import { getAllBusiness } from '@/api/common'
  import { getBusinessMat } from '@/api/business'
  import col from '@/columns/business'
  const priceColumns = col.price

  export default {
    components: {
      STable
    },
    name: 'FourZeroZero',
    data () {
      return {
        priceColumns,
        priceData: parameters => {
          return getAllBusiness(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        queryParam: {},
        visible: false,
        matData: [],
        matColumns: [
          {
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            title: '材料名称',
            dataIndex: 'mat_name'
          },
          {
            title: '是否必填',
            dataIndex: 'required'
          }
        ],
        note: ''
      }
    },
    created () {
      this.queryParam['category'] = '120'
      this.queryParam['page_size'] = '200'
    },
    methods: {
      handleMat (id) {
        getBusinessMat(id).then(res => {
          this.matData = res.result.data
          this.note = res.result.note
          this.visible = true
        })
      }
    }
  }
</script>

<style scoped>

</style>
